
<template>
  <div class="resultchart">
    <div
      id="myEcharts"
      style="height: 5.2rem;"
    ></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";

let myEcharts = echarts;

const props = defineProps(["width", "height", "category", "series", "seriesResult"]);

const initChart = () => {
  let chart = myEcharts.init(document.getElementById("myEcharts"),"purple-passion");
  const xLabelWidth = (chart.getWidth() - 20 - 16) / props.category.length
  chart.setOption({
    backgroundColor: "#f5f5f5",
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     type: "shadow",
    //   },
    // },
    grid: {
      left: "5",
      right: "4",
      bottom: "6",
      top: "30",
      containLabel: true,
    },
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#fadab3", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#f5b285", // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
    xAxis: {
      type: "category",
      data: props.category,
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
       interval: 0,
       width: xLabelWidth - 10,
       overflow: 'breakAll'
      },
    },
    yAxis: {
      type: "value",
      max: 10
    },
    series: [
      {
        data: props.series,
        type: "bar",
        barWidth: "40%",
        emphasis: {
          disabled: true,
          focus: 'none'
        },
        label: {
          show: true,
          position: "top",
          formatter: function(params) {
            const res = props.seriesResult[params.dataIndex]
            return `${res}\n${params.value}`
          }
        },
      },
    ],
  });
  window.onresize = function () {
    chart.resize();
  };
};

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  myEcharts.dispose;
});
</script>
<style scoped>
/* CSS样式 */
.wrap-text {
  white-space: normal !important; /* 正常换行 */
  word-break: break-all; /* 单词内断开换行 */
}
</style>